<template>
<div ref="scrollContainer" class="scroll-container">
    <header class="header">
        <div class="header-content">
            <div class="header-left">
                <div class="header-title">个人主页</div>
            </div>
            <div class="header-actions">
                <!-- 设置 -->
                <el-popover
                    placement="bottom-end"
                    title=""
                    :width="150"
                    trigger="click"
                >
                    <template #reference>
                        <svg t="1761548237001" class="action-btn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6339" width="20" height="20">
                            <path d="M416.4 958h191.2V849.7c0-12.7 6.4-25.5 19.1-31.9 31.9-12.7 63.7-31.9 89.2-51 12.7-6.4 25.5-6.4 38.2 0l95.6 57.3 95.6-165.7-95.6-57.3C837 588.5 830.6 575.7 837 563c0-19.1 6.4-31.9 6.4-51s0-31.9-6.4-51c0-12.7 6.4-25.5 12.7-31.9l95.6-57.3-95.6-165.7-95.6 57.3c-12.7 6.4-25.5 6.4-38.2 0-25.5-19.1-57.3-38.2-89.2-51-12.7-12.7-19.1-25.5-19.1-38.2V66H416.4v108.3c0 12.7-6.4 25.5-19.1 31.9-31.9 12.7-63.7 31.9-89.2 51-12.7 6.4-25.5 6.4-38.2 0l-95.6-51-95.6 165.6 95.6 57.3c12.7 6.4 19.1 19.1 12.7 31.9 0 19.1-6.4 31.9-6.4 51s0 31.9 6.4 51c6.4 12.7 0 25.5-12.7 31.9l-95.6 57.3 95.6 165.7 95.6-57.3c12.7-6.4 25.5-6.4 38.2 0 25.5 19.1 57.3 38.2 89.2 51 12.7 6.4 19.1 19.1 19.1 31.9V958z m223 63.7H384.6c-19.1 0-31.9-12.7-31.9-31.9v-121c-25.5-12.7-51-25.5-70.1-38.2l-101.9 63.7c-12.7 6.4-31.9 6.4-44.6-12.7L8.6 658.6c-12.7-19.1-6.4-38.2 12.7-44.6l101.9-63.7v-76.5L21.4 410.1c-19.1-6.4-25.5-25.5-12.7-44.6l127.4-223c6.4-12.7 25.5-19.1 44.6-6.4l101.9 63.7c19.1-12.7 44.6-31.9 70.1-38.2V34.1c0-19.1 12.7-31.9 31.9-31.9h254.9c19.1 0 31.9 12.7 31.9 31.9v121.1c25.5 12.7 51 25.5 70.1 38.2l101.9-63.7c12.7-6.4 31.9-6.4 44.6 12.7l127.4 223c12.7 19.1 6.4 38.2-12.7 44.6l-101.9 63.7v76.5l101.9 63.7c12.7 6.4 19.1 25.5 12.7 44.6L888 881.5c-6.4 12.7-25.5 19.1-44.6 12.7l-101.9-63.7c-19.1 12.7-44.6 31.9-70.1 38.2v121.1c-0.1 19.2-12.8 31.9-32 31.9zM512 703.2c-108.3 0-191.2-82.8-191.2-191.2S403.7 320.8 512 320.8 703.2 403.7 703.2 512 620.3 703.2 512 703.2z m0-318.6c-70.1 0-127.4 57.3-127.4 127.4S441.9 639.4 512 639.4 639.4 582.1 639.4 512 582.1 384.6 512 384.6z" 
                                fill="#666" p-id="6340">
                            </path>
                        </svg>
                    </template>

                    <template #default>
                        <div style="width: 100%;display: flex;justify-content: center;">
                            <el-card @click="goToBlacklist" style="width: 130px" class="myElCard"
                                body-style="padding: 10px;text-align: center;cursor:pointer;font-size: 13px;"
                                shadow="hover">
                                黑名单管理
                            </el-card>
                        </div>
                    </template>
                </el-popover>
                
            </div>
        </div>
    </header>

    <main class="main-content">
        <!--个人信息头部-->
        <div class="profile-header">
            <div class="basic-info">
                <div class="avatar" @click="handleAvatarClick()" 
                    :data-tooltip="isLoggedIn ? '查看个人资料' : '点击登录'"
                    :style="avatarStyle"
                >
                    {{ user_Store.userInfo.avatarUrl ? '' : user_Store.userInfo.username?.charAt(0) }}
                </div>
                <div class="user-basic">
                    <div class="username">{{ user_Store.userInfo.username || '未登录' }}</div>
                    <div class="user-id" v-if="isLoggedIn"> @{{ user_Store.userInfo.id || 'user_id' }}</div>
                    <div class="location">IP所属地： {{ user_Store.userInfo.location || '未知' }}</div>
                </div>
            </div>
            <div class="bio" v-if="isLoggedIn">{{ user_Store.userInfo.bio || '这个人很懒，还没有填写个人简介' }}</div>
            <div class="login-tip" v-else>点击头像登录账号，体验更多功能</div>
            
            <div v-show="isLoggedIn" class="data-info">
                <!--统计信息-->
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-number">{{ formatNumber(user_Store.userInfo.postsCount) }}</div>
                        <div class="stat-label">作品</div>
                    </div>
                    <div class="stat-item" @click="goToFollowList('followers')">
                        <div class="stat-number">{{ formatNumber(user_Store.userInfo.followersCount) }}</div>
                        <div class="stat-label">粉丝</div>
                    </div>
                    <div class="stat-item" @click="goToFollowList('following')">
                        <div class="stat-number">{{ formatNumber(user_Store.userInfo.followingCount) }}</div>
                        <div class="stat-label">关注</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">15.2k</div>
                        <div class="stat-label">获赞</div>
                    </div>
                </div>

                <div v-if="isLoggedIn" class="action-buttons">
                    <button @click="handleAvatarClick()" class="btn btn-primary">编辑资料</button>
                </div>
            </div>
        </div>
        
        <!--标签选择-->
        <div class="content-tabs">
            <div class="tab" :class="{'active': activeTab == 'posts'}" @click="switchTab(Tab.posts)">作品</div>
            <div class="tab" :class="{'active': activeTab == 'likes'}" @click="switchTab(Tab.likes)">点赞</div>
            <div class="tab" :class="{'active': activeTab == 'collections'}" @click="switchTab(Tab.collections)">收藏</div>
        </div>
        
        <!--作品列表-->
        <div id="posts-content" v-show="activeTab == 'posts'" class="content-grid">
            <div v-for="work in workList" class="grid-item" @click="GoToDetail(work.id)"
                 :style="work.imageUrlList && work.imageUrlList.length > 0 ? 
                 { backgroundImage: `url(${work.imageUrlList[0]})`, backgroundSize: 'cover', backgroundPosition: 'center' } : 
                 { backgroundColor: generateBackgroundColor(work.title, work.userId) }">
                <div class="overlay">
                    <div class="post-title">{{ work.title }}</div>
                    <div class="like-status" style="font-size: 12px;">
                        <span>❤️ {{ formatNumber(work.likesCount) }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 点赞列表 -->
        <div id="likes-content" v-show="activeTab == 'likes'" class="content-grid">
            <div v-for="item in likeList" class="grid-item" @click="GoToDetail(item.id)"
                 :style="item.imageUrlList && item.imageUrlList.length > 0 ? 
                 { backgroundImage: `url(${item.imageUrlList[0]})`, backgroundSize: 'cover', backgroundPosition: 'center' } : 
                 { backgroundColor: generateBackgroundColor(item.title, item.userId) }">
                <div class="overlay">
                    <div class="post-title">{{ item.title }}</div>
                    <div class="like-status" style="font-size: 12px;">
                        <span>❤️ {{ formatNumber(item.likesCount) }}</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!--收藏列表-->
        <div id="collections-content" v-show="activeTab == 'collections'" class="content-grid">
            <div v-for="item in favoriteList" class="grid-item" @click="GoToDetail(item.id)"
                 :style="item.imageUrlList && item.imageUrlList.length > 0 ? 
                 { backgroundImage: `url(${item.imageUrlList[0]})`, backgroundSize: 'cover', backgroundPosition: 'center' } : 
                 { backgroundColor: generateBackgroundColor(item.title, item.userId) }">
                <div class="overlay">
                    <div class="post-title">{{ item.title }}</div>
                    <div class="like-status" style="font-size: 12px;">
                        <span>❤️ {{ formatNumber(item.likesCount) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 加载更多视图监听盒子 -->
    <div ref="viewFlagBox_posts" v-show="activeTab == 'posts'" :style="{ paddingTop: workList.length < 1 ? '20px' : '0px' }">
        <div v-if="!isHasMorePosts && !loading_posts" 
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            没有更多作品
        </div>
        <div v-else-if="loading_posts"
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            努力加载中
        </div>
    </div>

    <div ref="viewFlagBox_likes" v-show="activeTab == 'likes'" :style="{ paddingTop: likeList.length < 1 ? '20px' : '0px' }">
        <div v-if="!isHasMoreLikes && !loading_likes" 
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            没有更多点赞
        </div>
        <div v-else-if="loading_likes"
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            努力加载中
        </div>
    </div>

    <div ref="viewFlagBox_collections" v-show="activeTab == 'collections'" :style="{ paddingTop: favoriteList.length < 1 ? '20px' : '0px' }">
        <div v-if="!isHasMoreCollections && !loading_collections" 
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            没有更多收藏
        </div>
        <div v-else-if="loading_collections"
            style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #999999;">
            努力加载中
        </div>
    </div>

    <!-- 底部占位盒子 -->
    <div class="bottom-bar"></div>

</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onActivated, onDeactivated, computed, nextTick } from 'vue'
import { useRouter, onBeforeRouteLeave } from 'vue-router'
import { UserInfoStore } from '@/stores/userInfoStore'
import api from '@/api/index.js'
import { formatNumber } from '@/utils/format.js'
import { generateBackgroundColor } from '@/utils/imageBackground.js'

const router = useRouter()
const user_Store = UserInfoStore()

// #region 基础数据
// 用户信息和登录状态
const isLoggedIn = computed(() => {
  return user_Store.userInfo != null && user_Store.userInfo.id != null
})
// #endregion


// #region 帖子展示
// 作品
const current_works = ref(1)
const size_works = ref(10)
const workList = ref([])
const isHasMorePosts = ref(true)
const loading_posts = ref(false)

// 点赞
const current_like = ref(1)
const size_like = ref(10)
const likeList = ref([])
const firstLoad_like = ref(true)
const isHasMoreLikes = ref(true)
const loading_likes = ref(false)

// 收藏
const current_favorite = ref(1)
const size_favorite = ref(10)
const favoriteList = ref([])
const favoriteLoad_like = ref(true)
const isHasMoreCollections = ref(true)
const loading_collections = ref(false)
// #endregion


// #region 标签切换
enum Tab { 
    posts = 'posts', 
    likes = 'likes', 
    collections = 'collections' 
}
const activeTab = ref(Tab.posts)

// 获取作品列表
const getPostList = async () => {
    if (!isHasMorePosts.value || loading_posts.value) return
    
    try {
        loading_posts.value = true
        const res = await api.Post_GetByUserId(user_Store.userInfo.id, current_works.value, size_works.value)
        
        if (res && res.data && res.data.code === 1) {
            const newPosts = res.data.data.list || []
            
            // 如果是第一页，直接替换数据；否则追加数据
            if (current_works.value === 1) {
                workList.value = newPosts
            } else {
                workList.value = [...workList.value, ...newPosts]
            }
            
            // 判断是否还有更多数据
            const totalCount = parseInt(res.data.data.total) || 0
            isHasMorePosts.value = workList.value.length < totalCount
            
        }
    } catch (error) {
        console.error('获取作品列表失败:', error)
    } finally {
        loading_posts.value = false
    }
}

// 获取点赞列表
const getLikeList = async () => {
    if (!isHasMoreLikes.value || loading_likes.value) return
    
    try {
        loading_likes.value = true
        const res = await api.Post_GetByLike(user_Store.userInfo.id, current_like.value, size_like.value)
        
        if (res && res.data && res.data.code === 1) {
            const newLikes = res.data.data.list || []
            
            // 如果是第一页，直接替换数据；否则追加数据
            if (current_like.value === 1) {
                likeList.value = newLikes
            } else {
                likeList.value = [...likeList.value, ...newLikes]
            }
            
            // 判断是否还有更多数据
            const totalCount = parseInt(res.data.data.total) || 0
            isHasMoreLikes.value = likeList.value.length < totalCount
            
        }
    } catch (error) {
        console.error('获取点赞列表失败:', error)
    } finally {
        loading_likes.value = false
    }
}

// 获取收藏列表
const getFavoriteList = async () => {
    if (!isHasMoreCollections.value || loading_collections.value) return
    
    try {
        loading_collections.value = true
        const res = await api.Post_GetByCollect(user_Store.userInfo.id, current_favorite.value, size_favorite.value)
        
        if (res && res.data && res.data.code === 1) {
            const newFavorites = res.data.data.list || []
            
            // 如果是第一页，直接替换数据；否则追加数据
            if (current_favorite.value === 1) {
                favoriteList.value = newFavorites
            } else {
                favoriteList.value = [...favoriteList.value, ...newFavorites]
            }
            
            // 判断是否还有更多数据
            const totalCount = parseInt(res.data.data.total) || 0
            isHasMoreCollections.value = favoriteList.value.length < totalCount
            
        }
    } catch (error) {
        console.error('获取收藏列表失败:', error)
    } finally {
        loading_collections.value = false
    }
}

// 加载更多数据
async function loadMoreData() {
    if (activeTab.value === Tab.posts) {
        if (isHasMorePosts.value && !loading_posts.value) {
            current_works.value += 1
            try {
                await getPostList()
            } catch (error) {
                current_works.value -= 1
            }
        }
    } else if (activeTab.value === Tab.likes) {
        if (isHasMoreLikes.value && !loading_likes.value) {
            current_like.value += 1
            try {
                await getLikeList()
            } catch (error) {
                current_like.value -= 1
            }
        }
    } else if (activeTab.value === Tab.collections) {
        if (isHasMoreCollections.value && !loading_collections.value) {
            current_favorite.value += 1
            try {
                await getFavoriteList()
            } catch (error) {
                current_favorite.value -= 1
            }
        }
    }
}

// 切换标签
async function switchTab(tab : Tab) {

  activeTab.value = tab

  // 切换观察者
  switchObserver()

  if(tab == Tab.likes){
    if(firstLoad_like.value){
      firstLoad_like.value = false
      await getLikeList()
    }
  }
  else if(tab == Tab.collections){
    if(favoriteLoad_like.value){
      favoriteLoad_like.value = false
      await getFavoriteList()
    }
  }
}
// #endregion


// #region 辅助函数
// 头像样式
const avatarStyle = computed(() => {
  if (user_Store.userInfo.avatarUrl) {
    // 如果有头像URL，显示图片
    return {
      backgroundImage: `url(${user_Store.userInfo.avatarUrl})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    }
  } else {
    // 如果没有头像，根据用户名生成渐变色
    const username = user_Store.userInfo.username || ''
    const charCode = username ? username.charCodeAt(0) : 0 // 获取用户名的第一个字符的 Unicode 编码
    const hue1 = (charCode * 5) % 360
    const hue2 = (hue1 + 40) % 360 // 在 hue1 基础上偏移 40 度，确保渐变色的两个颜色有对比
    
    return {
      // 使用 HSL 色彩模型（色相、饱和度 80%、亮度 65%）生成渐变色
      background: `linear-gradient(135deg, hsl(${hue1}, 80%, 65%), hsl(${hue2}, 80%, 65%))`
    }
  }
})

// 处理头像点击
const handleAvatarClick = () => {
    if (!isLoggedIn.value) {
        router.push('/login')
    } else {
        // 如果已登录，跳转到个人资料详情页
        router.push('/ProfileDetail')
    }
}

// 跳转详情页
function GoToDetail(opusId){
    router.push({
        path: '/OpusDetail',
        query: { id: opusId },
    });
}

// 跳转到关注/粉丝列表页
function goToFollowList(type) {
    router.push({
        path: '/FollowList',
        query: { type: type },
    });
}

// 跳转到黑名单管理页
function goToBlacklist() {
    if (!isLoggedIn.value) {
        router.push('/login');
        return;
    }
    router.push('/Blacklist');
}
// #endregion


// 恢复滚动位置相关
const scrollContainer = ref(null);
const savedScrollPosition = ref(0);
onBeforeRouteLeave((to, from, next)=> {
    //跳转路由之前记录滚动条位置
    //savedScrollPosition.value = window.scrollY 
    savedScrollPosition.value = scrollContainer.value.scrollTop;
    console.log('Profile离开前记录位置--:', savedScrollPosition.value);
    next(); //允许跳转
})

// 视图监听相关
const viewFlagBox_posts = ref(null);
const viewFlagBox_likes = ref(null);
const viewFlagBox_collections = ref(null);
let observer = null;

function observerViewFlagBox(){
    observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                console.log('进入视图，加载更多数据!!!');
                loadMoreData()
            }
        });
    }, {
        threshold: 0,
        rootMargin: '0px'
    });

    // 监听当前活跃标签对应的视图盒子
    if (activeTab.value === 'posts' && viewFlagBox_posts.value) {
        observer.observe(viewFlagBox_posts.value);
    } else if (activeTab.value === 'likes' && viewFlagBox_likes.value) {
        observer.observe(viewFlagBox_likes.value);
    } else if (activeTab.value === 'collections' && viewFlagBox_collections.value) {
        observer.observe(viewFlagBox_collections.value);
    }
}

// 切换观察者（当标签切换时）
function switchObserver() {
    if (observer) {
        observer.disconnect();
    }
    
    nextTick(() => {
        if (activeTab.value === 'posts' && viewFlagBox_posts.value) {
            observer.observe(viewFlagBox_posts.value);
        } else if (activeTab.value === 'likes' && viewFlagBox_likes.value) {
            observer.observe(viewFlagBox_likes.value);
        } else if (activeTab.value === 'collections' && viewFlagBox_collections.value) {
            observer.observe(viewFlagBox_collections.value);
        }
    });
}

onMounted(async ()=>{
    console.log('Profile被挂载了！')
    if(isLoggedIn.value){
        await getPostList() // 进入页面时默认获取作品列表
        nextTick(() => {
            observerViewFlagBox() // 设置视图监听
        })
    }
    
})


//当前组件被用keep-alive缓存了，会有两个新的生命周期函数
onActivated(() => {
    nextTick(() => {
        if (scrollContainer.value && savedScrollPosition.value > 0) {
            scrollContainer.value.scrollTop = savedScrollPosition.value;
            console.log('Profile--恢复滚动位置:', savedScrollPosition.value);
        }
    });

});
onDeactivated(() => {
    //window.scrollTo(0, 0); // 复原<body>的滚动位置，防止污染全局
});



</script>

<style lang="scss" scoped>
.scroll-container {
    height: 100vh;
    overflow-y: auto; /* 允许垂直滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}


/* #region 头部 */
.header {
    background: white;
    padding: 10px 15px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.back-btn {
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
}

.header-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    cursor: pointer;
    transition: all 0.3s ease;
}
 .action-btn:hover {
    scale: 1.1;
 }

.myElCard:active {
  transform: scale(0.98) translateY(2px); /* 组合效果：同时缩小和下移 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
  background-color: #f6f5f5; /* 颜色加深 */
}

/* #endregion 头部结束 */


/* #region 内容区域 */
.main-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.profile-header {
    background: white;
    padding: 20px 15px 5px 15px;
}

.basic-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.avatar::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    white-space: nowrap;
}

.avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.avatar:hover::after {
    opacity: 1;
}

.user-basic{
    margin-left: 16px;
    width: 100%;
}

.username {
    font-size: 18px;
    font-weight: 600;
}

.user-id {
    color: #999;
    font-size: 12px;
    margin-top: 8px;
}

.location {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.bio {
    color: #666;
    margin-top: 16px;
    font-size: 14px;
    line-height: 140%;
    white-space: pre-line;
}

.login-tip {
    color: #666;
    margin-top: 16px;
    font-size: 14px;
}

.data-info{
    display: flex;
    justify-content: space-between;
}

.stats {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.stat-item {
    text-align: center;
    cursor: pointer;
}
.stat-number {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.btn {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all 0.3s;
}

.btn-primary {
    background: #ff6b6b;
    color: white;
    border: none;
    height: 32px;
}

.content-tabs {
    background: white;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.tab {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px;
    padding: 15px 10px;
}

.grid-item {
    aspect-ratio: 1;
    // background: linear-gradient(45deg, #ff9a9e, #fecfef);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
}

.grid-item:hover {
    transform: scale(1.05);
}

.grid-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(193,86,86,0.6));
    padding: 10px 8px 8px;
    color: white;
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-item .post-title {
    font-size: 12px;
    font-weight: 500;
    flex: 1;
    text-align: left;
    line-height: 1.6;
    margin-right: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-item .stats {
    display: flex;
    gap: 8px;
    font-size: 10px;
    text-align: right;
    flex-shrink: 0;
}

/* #endregion 内容区域结束 */

.bottom-bar{
    height: 70px;
}


@media (min-width: 350px) and (max-width: 400px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  }
}
</style>